<template>
  <view>
    <!-- 搜索框 -->
    <view>
      <my-search></my-search>
    </view>

    <!-- 顶部信息 -->
    <view class="top-info">
      <!-- 分类标签 -->
      <view class="category-label">
        <text>分类</text>
      </view>

      <!-- 销量排序 -->
      <view class="sort-dropdown">
        <text @click="openSalesDrawer">销量</text>
      </view>
      <!-- 销量排序抽屉 -->
      <uni-popup ref="salesPopup" type="top" background-color="white" v-model="showSalesDrawer">
        <view class="popup-content">
          <view v-for="(option, index) in sortOptions" :key="index">
            <view @click="onSortChange(index)" class="popup-item">
              {{ option }}
            </view>
          </view>
        </view>
      </uni-popup>

      <!-- 价格筛选 -->
      <view class="price-filter">
        <text @click="openPriceDrawer">价格</text>
      </view>
    </view>
<view class="divider"></view>
    <!-- 价格筛选抽屉 -->
    <uni-popup ref="pricePopup" type="top" background-color="white" v-model="showPriceDrawer">
      <view class="drawer-content">
		  <view v-for="(option, index) in sortOptions" :key="index" class="price-option">
		    <view @click="onSortChange(index + 2)" >
		      {{ option }}
		    </view>
		  </view>
        <text class="drawer-title">选择价格区间</text>
        <view class="price-input">
          <input type="number" v-model="priceMin" placeholder="最低价格" />
          <text>—</text>
          <input type="number" v-model="priceMax" placeholder="最高价格" />
        </view>
        <view class="drawer-actions">
          <button @click="closePriceDrawer">关闭</button>
          <button @click="applyPriceFilter">确认</button>
        </view>
      </view>
    </uni-popup>

    <!-- 商品滑动区域 -->
    <view class="scroll-container">
      <!-- 左侧品类滑动区域 -->
      <scroll-view class="left-scroll" scroll-y="true">
        <block v-for="(item, i) in cateList" :key="i">
          <view :class="['left-item', i === active ? 'active' : '']" @click="changeActive(i, item.categoryId)">
            <view class="category-item">{{ item.categoryName }}</view>
          </view>
        </block>
      </scroll-view>

     <scroll-view class="right-scroll" scroll-y="true" show-scrollbar="true">
       <view class="product-row">
         <view v-for="(item2, index) in productList" :key="index" class="product-item">
           <view > 
             <product class="product-card"
               :imageUrl="getPrimaryImageUrl(item2.images)"
               :title="item2.productName"
               :price="item2.price"
			   :unit="item2.unit"
			   :productId="item2.productId"
             />
           </view>
         </view>
       </view>
     </scroll-view>
    </view>
  </view>
</template>

<script>
  import { getCateList, getProductList } from '../../../api/home/goods';

  export default {
	  options: {
	  			styleIsolation: 'shared', 
	  		},
    data() {
      return {
        cateList: [], // 分类列表
        productList: [], // 商品列表
        active: 0, // 当前激活的品类索引
        sortOptions: ['取消', '从高到低', '从低到高'], // 排序选项
        selectedSortIndex: 0, // 当前选择的排序选项
        priceMin: '', // 最低价格
        priceMax: '', // 最高价格
      };
    },

    methods: {
      // 获取品类列表
      async getCateList() {
        try {
          const data = await getCateList();
          this.cateList = data;
      
          // 获取第一个品类的商品
          if (data.length > 0) {
            this.changeActive(0, data[0].categoryId); // 默认加载第一个品类的商品
			
          }
        } catch (error) {
          console.error('获取品类数据失败', error);
        }
      },

      // 获取品类下的商品列表
      async getProductList(cateGoryId) {
        try {
          const data = await getProductList(cateGoryId, this.priceMin, this.priceMax, this.selectedSortIndex);
          this.productList = data;
        } catch (error) {
          console.error('获取商品数据失败', error);
        }
      },

      
      getPrimaryImageUrl(images) {
         if (!images || images.length === 0) {
           // 返回默认动态图片路径
           return '/static/home/dj.jpg'; // 默认图片的 URL
         }
        
         const primaryImage = images.find(image => image.isPrimary);
         // 返回主图 URL 或第一张图片的 URL，如果都没有，则返回默认图片
         return primaryImage?.imageUrl || images[0]?.imageUrl || '/static/home/dj.jpg';
       },

      // 切换左侧品类的激活状态
      changeActive(index, categoryId) {
        this.active = index;
        this.getProductList(categoryId); // 获取选中品类的商品列表
      },

      // 排序选择
      onSortChange(index) {
        this.selectedSortIndex = index;
        this.getProductList(this.cateList[this.active].categoryId); // 切换排序时，重新加载商品
      },

      // 打开销量排序抽屉
      openSalesDrawer() {
        this.$refs.salesPopup.open()
      },

      // 打开价格筛选抽屉
      openPriceDrawer() {
        this.$refs.pricePopup.open()
      },

      // 关闭价格筛选抽屉
      closePriceDrawer() {
        this.$refs.pricePopup.close();
      },

      // 应用价格筛选
      applyPriceFilter() {
		  console.log(this.priceMin)
        this.getProductList(this.cateList[this.active].categoryId); // 应用价格筛选后重新加载商品
        this.closePriceDrawer(); // 关闭价格筛选抽屉
      },
    },

    // 页面加载时获取品类数据并默认加载第一个品类的商品
    onLoad() {
      this.getCateList();
    }
  };
</script>

<style lang="scss">

	//顶部区域
.top-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  padding: 2px;
  position: relative;
}

.category-label {
	margin-left: 12px;
  font-size: 16px;
}

.sort-dropdown,
.price-filter {
  cursor: pointer;
}
//轮播区域
.scroll-container {
  display: flex;
  height: calc(100vh - 60px); // 视口高度减去顶部信息
  overflow: hidden;
}

.left-scroll {
  width: 19%;
  margin-left: 3px;
  margin-top: 10px;
  border-right: 1px solid #e0e0e0;
  height: 100%;
  overflow-y: auto; // 独立滚动
}

.right-scroll {
  width: 81%; // 剩余宽度
  height: 100%;
  overflow-y: auto; // 独立滚动
  padding-left: 3px;
}

.product-row {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  gap: 10px; // 设置商品之间的间距
}

/* 分类项样式 */
.category-item {
  padding: 7px;
  border: 1px solid #282c35;
  margin-bottom: 2px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 点击后选中分类的样式 */
	.left-item.active {
	  background-color: #00aa00; 
	  color: white;
	}

/* 添加分割线的样式 */
.divider {
  border-top: 1px solid #00aa00;
  margin-top: 10px;
}

/* 修改产品卡片的样式 */
::v-deep .product-card {
  width: 30% !important;
  height: 190px !important;
}

.product-item {
  width: 48%;
  margin-bottom: 10px; /* 商品之间的垂直间距 */
}

::v-deep .product-card {
  width: 100% !important;
  height: 190px !important;
}

::v-deep .product-card .product-title {
  font-size: 15px !important;
}

::v-deep .product-card .product-price {
  font-size: 16px !important;
  color: #ff4d4f !important;
}
.popup-content,
.drawer-content {
  padding: 16px;
}
.price-option{
	border-bottom: 1px solid #e0e0e0;
	padding: 12px 0;
	display: flex;
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中 */
}
/* 每一行的分割线 */
.popup-item,
.price-input,
.drawer-actions {
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 0;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 文字加粗并居中 */
.popup-item,
.drawer-title,
.price-input text {
  font-weight: bold;
  text-align: center;
}

/* 输入框样式 */
.price-input {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 5px 0;
}

.price-input input {
  width: 40%;
  height: 50px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  text-align: center;
}

/* 关闭与确认按钮放在同一行并居中 */
.popup-item,
.price-input,
.drawer-title,
.drawer-actions {
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 0;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
 
}


.drawer-actions button {
  flex: 1;
  padding: 2px;
  margin: 0 8px;
  font-size: 12px;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  text-align: center;
}

.drawer-actions button:first-child {
  background-color: #00aa00; /* 关闭按钮颜色 */
}

.drawer-actions button:last-child {
  background-color: #007aff; /* 确认按钮颜色 */
}
</style>
